<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <div class="min-h-screen bg-gray-50">
    <Header />
    <!-- 左侧导航栏 -->
    <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
      <nav class="py-4">
        <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
          <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
            :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
            <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
            <span>{{ menu.name }}</span>
            <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
              :class="{ 'transform rotate-180': menu.expanded }"></i>
          </div>
          <div v-if="menu.expanded" class="bg-gray-900">
            <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
              class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
              :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
              <a v-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm w-full">{{ submenu.name
              }}</a>
              <span v-else class="text-sm">{{ submenu.name }}</span>
            </div>
          </div>
        </div>
      </nav>
    </aside>
    <!-- 主内容区域 -->
    <main class="pt-16 pl-64">
      <div class="container mx-auto p-6">
        <!-- 面包屑导航 -->
        <div class="flex items-center text-sm mb-4 text-gray-500">
          <span>首页</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span>系统管理</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span class="text-blue-600">系统配置管理</span>
        </div>
        <!-- 数据统计卡片 -->
        <div class="grid grid-cols-4 gap-4 mb-6">
          <!-- 参数总数卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
              <i class="fas fa-cogs text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">参数总数</div>
              <div class="text-2xl font-bold text-gray-900">128</div>
              <div class="text-xs text-green-600 flex items-center">
                <i class="fas fa-arrow-up mr-1"></i> 环比增长 3.2%
              </div>
            </div>
          </div>
          <!-- 字典数量卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
              <i class="fas fa-book text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">字典数量</div>
              <div class="text-2xl font-bold text-gray-900">45</div>
              <div class="text-xs text-green-600 flex items-center">
                <i class="fas fa-arrow-up mr-1"></i> 环比增长 5.8%
              </div>
            </div>
          </div>
          <!-- 备份记录卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
              <i class="fas fa-database text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">备份记录</div>
              <div class="text-2xl font-bold text-gray-900">36</div>
              <div class="text-xs text-gray-500 flex items-center">
                <span>最近备份：2025-07-08</span>
              </div>
            </div>
          </div>
          <!-- 在线配置卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4">
              <i class="fas fa-sliders-h text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">在线配置</div>
              <div class="text-2xl font-bold text-gray-900">92</div>
              <div class="text-xs text-blue-600 flex items-center">
                <i class="fas fa-sync-alt mr-1"></i> 最近更新 2 小时前
              </div>
            </div>
          </div>
        </div>
        <!-- 筛选条件区域 -->
        <div v-if="activeTab === 'params'" class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex flex-wrap items-center gap-4">
            <div class="flex items-center">
              <span class="text-gray-600 mr-2">配置类型：</span>
              <div class="relative">
                <button
                  class="flex items-center justify-between w-48 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer"
                  @click.stop="toggleTypeDropdown">
                  <span class="text-gray-700">{{
                    paramFilterConditions.type
                  }}</span>
                  <i class="fas fa-chevron-down text-gray-500 text-xs"></i>
                </button>
                <!-- 配置类型下拉菜单 -->
                <div v-if="showTypeDropdown"
                  class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto"
                  @click.stop>
                  <div v-for="(type, index) in paramTypes" :key="index"
                    class="px-3 py-2 cursor-pointer hover:bg-gray-100 text-sm transition-colors duration-150" :class="{
                      'bg-blue-50 text-blue-600':
                        paramFilterConditions.type === type,
                    }"  @click="selectParamType(type)">
                    {{ type }}
                  </div>
                </div>
              </div>
            </div>
            <div class="flex items-center">
              <span class="text-gray-600 mr-2">状态：</span>
              <div class="relative">
                <button
                  class="flex items-center justify-between w-48 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer"
                  @click.stop="toggleParamStatusDropdown">
                  <span class="text-gray-700">{{
                    paramFilterConditions.status
                  }}</span>
                  <i class="fas fa-chevron-down text-gray-500 text-xs"></i>
                </button>
                <!-- 状态下拉菜单 -->
                <div v-if="showParamStatusDropdown"
                  class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto"
                  @click.stop>
                  <div v-for="(status, index) in paramStatusOptions" :key="index"
                    class="px-3 py-2 cursor-pointer hover:bg-gray-100 text-sm transition-colors duration-150" :class="{
                      'bg-blue-50 text-blue-600':
                        paramFilterConditions.status === status,
                    }" @click="selectParamStatus(status)">
                    {{ status }}
                  </div>
                </div>
              </div>
            </div>
            <div class="flex items-center ml-4">
              <div class="relative">
                <input type="text" v-model="paramFilterConditions.search" @keyup.enter="handleParamSearch"
                  placeholder="搜索配置名称/键名"
                  class="w-64 pl-10 pr-4 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
              </div>
            </div>
            <div class="ml-auto">
              <button
                class="px-4 py-2 bg-blue-600 text-white rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                @click="addParam">
                <i class="fas fa-plus mr-2"></i> 新建配置
              </button>
            </div>
          </div>
        </div>

        <!-- 标签页切换 -->
        <div class="bg-white rounded-lg shadow-sm mb-6">
          <div class="border-b border-gray-200">
            <nav class="flex -mb-px">
              <button v-for="(tab, index) in tabs" :key="index"
                class="py-4 px-6 font-medium text-sm border-b-2 focus:outline-none !rounded-button whitespace-nowrap cursor-pointer"
                :class="activeTab === tab.id
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  " @click="activeTab = tab.id">
                <i :class="tab.icon + ' mr-2'"></i>
                {{ tab.name }}
              </button>
            </nav>
          </div>
          <!-- 系统参数配置标签页 -->
          <div v-if="activeTab === 'params'" class="p-4">
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead>
                  <tr>
                    <th
                      class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      <div class="flex items-center">
                        <input type="checkbox" class="mr-2" @click="toggleSelectAll" :checked="isAllSelected" />
                        参数名称
                      </div>
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                      参数键名
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                      参数键值
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                      系统内置
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                      状态
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                      更新时间
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                      操作
                    </th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(param, index) in paginatedParams" :key="index" class="hover:bg-gray-50">
                    <td class="px-4 py-3">
                      <div class="flex items-center">
                        <input type="checkbox" class="mr-3" v-model="param.selected" />
                        <div>
                          <div class="text-sm font-medium text-gray-900">
                            {{ param.name }}
                          </div>
                          <div class="text-xs text-gray-500">
                            {{ param.description }}
                          </div>
                        </div>
                      </div>
                    </td>
                    <td class="px-4 py-3">
                      <div class="text-sm text-gray-900 justify-center">
                        {{ param.key }}
                      </div>
                    </td>
                    <td class="px-4 py-3">
                      <div class="text-sm text-gray-900 justify-center">
                        {{ param.value }}
                      </div>
                    </td>
                    <td class="px-4 py-3">
                      <div class="text-sm text-gray-900 justify-center">
                        {{ param.isSystem ? "是" : "否" }}
                      </div>
                    </td>
                    <td class="px-4 py-3">
                      <div class="flex items-center justify-center">
                        <div class="w-2 h-2 rounded-full mr-2" :class="param.status === '启用'
                          ? 'bg-green-500'
                          : 'bg-red-500'
                          "></div>
                        <span class="text-sm" :class="param.status === '启用'
                          ? 'text-green-600'
                          : 'text-red-600'
                          ">{{ param.status }}</span>
                      </div>
                    </td>
                    <td class="px-4 py-3">
                      <div class="text-sm text-gray-900 justify-center">
                        {{ param.updateTime }}
                      </div>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                      <div class="flex space-x-2 justify-center">
                        <button
                          class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer"
                          @click="editParam(param)">
                          <i class="fas fa-edit mr-1"></i> 编辑
                        </button>
                        <button class="hover:text-red-800 !rounded-button whitespace-nowrap cursor-pointer" :class="param.status === '启用'
                          ? 'text-red-600'
                          : 'text-green-600'
                          " @click="toggleParamStatus(param)">
                          <i :class="param.status === '启用'
                            ? 'fas fa-ban mr-1'
                            : 'fas fa-check-circle mr-1'
                            "></i>
                          {{ param.status === "启用" ? "禁用" : "启用" }}
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- 批量操作和分页 -->
              <div class="flex justify-between items-center mt-4 px-4 py-3">
                <div class="flex items-center space-x-2">
                  <button
                    class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                    :disabled="!hasSelectedParams" :class="{
                      'opacity-50 cursor-not-allowed': !hasSelectedParams,
                    }" @click="batchDeleteParams">
                    批量删除
                  </button>
                  <button
                    class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                    :disabled="!hasSelectedParams" :class="{
                      'opacity-50 cursor-not-allowed': !hasSelectedParams,
                    }" @click="batchExportParams">
                    批量导出
                  </button>
                  <span class="text-sm text-gray-500 ml-2" v-if="hasSelectedParams">
                    已选择
                    <span class="text-blue-600">{{ selectedParamsCount }}</span>
                    项
                  </span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm text-gray-500 mr-2">每页显示：</span>
                  <select v-model="pageSize" @change="changePageSize(parseInt($event.target.value))"
                    class="px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm focus:outline-none">
                    <option v-for="size in pageSizes" :key="size" :value="size">
                      {{ size }} 条
                    </option>
                  </select>
                </div>
                <div class="flex space-x-2 items-center">
                  <span class="text-sm text-gray-500">共 {{ applyParamFilters().length }} 条记录</span>
                  <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1"
                    class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                    :class="{
                      'opacity-50 cursor-not-allowed': currentPage === 1,
                    }">
                    上一页
                  </button>

                  <!-- 页码显示 -->
                  <template v-for="page in totalPages" :key="page">
                    <button v-if="
                      page === 1 ||
                      page === totalPages ||
                      (page >= currentPage - 2 && page <= currentPage + 2)
                    " @click="changePage(page)"
                      class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer" :class="page === currentPage
                        ? 'bg-blue-600 text-white'
                        : 'bg-gray-100 text-gray-700'
                        ">
                      {{ page }}
                    </button>
                    <span v-else-if="
                      page === currentPage - 3 || page === currentPage + 3
                    " class="px-1 py-1 text-gray-500">
                      ...
                    </span>
                  </template>

                  <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages"
                    class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                    :class="{
                      'opacity-50 cursor-not-allowed':
                        currentPage === totalPages,
                    }">
                    下一页
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 字典管理标签页 -->
          <div v-if="activeTab === 'dict'" class="p-4">
            <div class="flex justify-between mb-4">
              <div class="flex items-center">
                <div class="relative">
                  <input type="text" v-model="dictFilterConditions.search" @keyup.enter="handleDictSearch"
                    placeholder="搜索字典名称/类型"
                    class="w-64 pl-10 pr-4 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
                  <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <div class="relative ml-4">
                  <button
                    class="flex items-center justify-between w-48 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer"
                    @click.stop="toggleDictStatusDropdown">
                    <span class="text-gray-700">{{
                      dictFilterConditions.status
                    }}</span>
                    <i class="fas fa-chevron-down text-gray-500 text-xs"></i>
                  </button>
                  <!-- 状态下拉菜单 -->
                  <div v-if="showDictStatusDropdown"
                    class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto"
                    @click.stop>
                    <div v-for="(status, index) in dictStatusOptions" :key="index"
                      class="px-3 py-2 cursor-pointer hover:bg-gray-100 text-sm transition-colors duration-150" :class="{
                        'bg-blue-50 text-blue-600':
                          dictFilterConditions.status === status,
                      }" @click="selectDictStatus(status)">
                      {{ status }}
                    </div>
                  </div>
                </div>
              </div>
              <button
                class="px-4 py-2 bg-blue-600 text-white rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                @click="showAddDictModal = true">
                <i class="fas fa-plus mr-2"></i> 新建字典
              </button>
            </div>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead>
                  <tr>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                      字典名称
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                      字典类型
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                      状态
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                      备注
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                      创建时间
                    </th>
                    <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                      操作
                    </th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(dict, index) in paginatedDictionaries" :key="index" class="hover:bg-gray-50">
                    <td class="px-4 py-3">
                      <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center mr-3" :class="dict.iconBg">
                          <i :class="dict.icon + ' ' + dict.iconColor"></i>
                        </div>
                        <div class="text-sm font-medium text-gray-900">
                          {{ dict.name }}
                        </div>
                      </div>
                    </td>
                    <td class="px-4 py-3">
                      <div class="text-sm text-gray-900 justify-center">
                        {{ dict.type }}
                      </div>
                    </td>
                    <td class="px-4 py-3">
                      <div class="flex items-center justify-center">
                        <div class="w-2 h-2 rounded-full mr-2" :class="dict.status === '正常'
                          ? 'bg-green-500'
                          : 'bg-red-500'
                          "></div>
                        <span class="text-sm" :class="dict.status === '正常'
                          ? 'text-green-600'
                          : 'text-red-600'
                          ">{{ dict.status }}</span>
                      </div>
                    </td>
                    <td class="px-4 py-3">
                      <div class="text-sm text-gray-900 justify-center">
                        {{ dict.remark }}
                      </div>
                    </td>
                    <td class="px-4 py-3">
                      <div class="text-sm text-gray-900 justify-center">
                        {{ dict.createTime }}
                      </div>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                      <div class="flex space-x-2 justify-center">
                        <button
                          class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer"
                          @click="editDict(dict)">
                          <i class="fas fa-edit mr-1"></i> 编辑
                        </button>
                        <button
                          class="text-purple-600 hover:text-purple-800 !rounded-button whitespace-nowrap cursor-pointer"
                          @click="viewDictData(dict)">
                          <i class="fas fa-list mr-1"></i> 字典数据
                        </button>
                        <button class="text-red-600 hover:text-red-800 !rounded-button whitespace-nowrap cursor-pointer"
                          @click="deleteDict(dict)">
                          <i class="fas fa-trash-alt mr-1"></i> 删除
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- 字典管理分页 -->
              <div class="flex justify-between items-center mt-4 px-4 py-3">
                <div class="flex items-center">
                  <span class="text-sm text-gray-500 mr-2">每页显示：</span>
                  <select v-model="pageSizeDict" @change="changePageSizeDict(parseInt($event.target.value))"
                    class="px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm focus:outline-none">
                    <option v-for="size in pageSizes" :key="size" :value="size">
                      {{ size }} 条
                    </option>
                  </select>
                </div>
                <div class="flex space-x-2 items-center">
                  <span class="text-sm text-gray-500">共 {{ applyDictFilters().length }} 条记录</span>
                  <button @click="changePageDict(currentPageDict - 1)" :disabled="currentPageDict === 1"
                    class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                    :class="{
                      'opacity-50 cursor-not-allowed': currentPageDict === 1,
                    }">
                    上一页
                  </button>

                  <!-- 页码显示 -->
                  <template v-for="page in totalPagesDict" :key="page">
                    <button v-if="
                      page === 1 ||
                      page === totalPagesDict ||
                      (page >= currentPageDict - 2 &&
                        page <= currentPageDict + 2)
                    " @click="changePageDict(page)"
                      class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer" :class="page === currentPageDict
                        ? 'bg-blue-600 text-white'
                        : 'bg-gray-100 text-gray-700'
                        ">
                      {{ page }}
                    </button>
                    <span v-else-if="
                      page === currentPageDict - 3 ||
                      page === currentPageDict + 3
                    " class="px-1 py-1 text-gray-500">
                      ...
                    </span>
                  </template>

                  <button @click="changePageDict(currentPageDict + 1)" :disabled="currentPageDict === totalPagesDict"
                    class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                    :class="{
                      'opacity-50 cursor-not-allowed':
                        currentPageDict === totalPagesDict,
                    }">
                    下一页
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 系统备份还原标签页 -->
          <div v-if="activeTab === 'backup'" class="p-4">
            <div class="flex justify-between items-center mb-4">
              <div class="flex space-x-4">
                <button
                  class="px-4 py-2 bg-blue-600 text-white rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                  @click="createBackup">
                  <i class="fas fa-save mr-2"></i> 创建备份
                </button>
                <button
                  class="px-4 py-2 bg-green-600 text-white rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                  @click="showRestoreModal = true">
                  <i class="fas fa-undo mr-2"></i> 系统还原
                </button>
              </div>
              <div class="flex items-center">
                <div class="relative">
                  <input type="text" v-model="backupFilterConditions.search" @keyup.enter="handleBackupSearch"
                    placeholder="搜索备份记录"
                    class="w-64 pl-10 pr-4 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
                  <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
              </div>
            </div>
            <!-- 备份统计图表 -->
            <div class="grid grid-cols-3 gap-4 mb-6">
              <div class="bg-white rounded-lg shadow-sm p-4">
                <h3 class="text-lg font-medium text-gray-800 mb-3">
                  备份类型分布
                </h3>
                <div ref="backupTypeChart" class="h-64"></div>
              </div>
              <div class="bg-white rounded-lg shadow-sm p-4">
                <h3 class="text-lg font-medium text-gray-800 mb-3">
                  备份大小趋势
                </h3>
                <div ref="backupSizeChart" class="h-64"></div>
              </div>
              <div class="bg-white rounded-lg shadow-sm p-4">
                <h3 class="text-lg font-medium text-gray-800 mb-3">
                  备份频率统计
                </h3>
                <div ref="backupFrequencyChart" class="h-64"></div>
              </div>
            </div>
            <!-- 备份记录列表 -->
            <div class="bg-white rounded-lg shadow-sm p-4">
              <h3 class="text-lg font-medium text-gray-800 mb-3">备份记录</h3>
              <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                  <thead>
                    <tr>
                      <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                        备份名称
                      </th>
                      <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                        备份类型
                      </th>
                      <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                        备份大小
                      </th>
                      <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                        备份时间
                      </th>
                      <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                        创建人
                      </th>
                      <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider ">
                        状态
                      </th>
                      <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                        操作
                      </th>
                    </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200">
                    <tr v-for="(backup, index) in paginatedBackups" :key="index" class="hover:bg-gray-50">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <div class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
                            :class="getBackupIconClass(backup.type).bg">
                            <i :class="getBackupIconClass(backup.type).icon +
                              ' ' +
                              getBackupIconClass(backup.type).color
                              "></i>
                          </div>
                          <div class="text-sm font-medium text-gray-900">
                            {{ backup.name }}
                          </div>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="text-sm text-gray-900 justify-center">
                          {{ backup.type }}
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="text-sm text-gray-900 justify-center">
                          {{ backup.size }}
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="text-sm text-gray-900 justify-center">
                          {{ backup.time }}
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="text-sm text-gray-900 justify-center">
                          {{ backup.creator }}
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center justify-center">
                          <div class="w-2 h-2 rounded-full mr-2" :class="backup.status === '完成'
                            ? 'bg-green-500'
                            : backup.status === '进行中'
                              ? 'bg-blue-500'
                              : 'bg-red-500'
                            "></div>
                          <span class="text-sm" :class="backup.status === '完成'
                            ? 'text-green-600'
                            : backup.status === '进行中'
                              ? 'text-blue-600'
                              : 'text-red-600'
                            ">{{ backup.status }}</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2 justify-center">
                          <button
                            class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer"
                            @click="downloadBackup(backup)">
                            <i class="fas fa-download mr-1"></i> 下载
                          </button>
                          <button
                            class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer"
                            @click="restoreFromBackup(backup)">
                            <i class="fas fa-undo mr-1"></i> 还原
                          </button>
                          <button
                            class="text-red-600 hover:text-red-800 !rounded-button whitespace-nowrap cursor-pointer"
                            @click="deleteBackup(backup)">
                            <i class="fas fa-trash-alt mr-1"></i> 删除
                          </button>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <!-- 备份管理分页 -->
                <div class="flex justify-between items-center mt-4 px-4 py-3">
                  <div class="flex items-center justify-center">
                    <span class="text-sm text-gray-500 mr-2">每页显示：</span>
                    <select v-model="pageSizeBackup" @change="
                      changePageSizeBackup(parseInt($event.target.value))
                      " class="px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm focus:outline-none">
                      <option v-for="size in pageSizes" :key="size" :value="size">
                        {{ size }} 条
                      </option>
                    </select>
                  </div>
                  <div class="flex space-x-2 items-center">
                    <span class="text-sm text-gray-500">共 {{ applyBackupFilters().length }} 条记录</span>
                    <button @click="changePageBackup(currentPageBackup - 1)" :disabled="currentPageBackup === 1"
                      class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                      :class="{
                        'opacity-50 cursor-not-allowed':
                          currentPageBackup === 1,
                      }">
                      上一页
                    </button>

                    <!-- 页码显示 -->
                    <template v-for="page in totalPagesBackup" :key="page">
                      <button v-if="
                        page === 1 ||
                        page === totalPagesBackup ||
                        (page >= currentPageBackup - 2 &&
                          page <= currentPageBackup + 2)
                      " @click="changePageBackup(page)"
                        class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer" :class="page === currentPageBackup
                          ? 'bg-blue-600 text-white'
                          : 'bg-gray-100 text-gray-700'
                          ">
                        {{ page }}
                      </button>
                      <span v-else-if="
                        page === currentPageBackup - 3 ||
                        page === currentPageBackup + 3
                      " class="px-1 py-1 text-gray-500">
                        ...
                      </span>
                    </template>

                    <button @click="changePageBackup(currentPageBackup + 1)"
                      :disabled="currentPageBackup === totalPagesBackup"
                      class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                      :class="{
                        'opacity-50 cursor-not-allowed':
                          currentPageBackup === totalPagesBackup,
                      }">
                      下一页
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 新建配置弹窗 -->
    <div v-if="showAddConfigModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6 w-[600px] max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-bold text-gray-800">
            {{ editingParam ? "编辑参数" : "新建参数" }}
          </h3>
          <button @click="showAddConfigModal = false" class="text-gray-500 hover:text-gray-700 cursor-pointer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="grid grid-cols-2 gap-4 mb-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">参数名称</label>
            <input type="text" v-model="configForm.name" placeholder="请输入参数名称"
              class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">参数键名</label>
            <input type="text" v-model="configForm.key" placeholder="请输入参数键名"
              class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
          </div>
          <div class="col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1">参数键值</label>
            <input type="text" v-model="configForm.value" placeholder="请输入参数键值"
              class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
          </div>
          <div class="col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1">参数描述</label>
            <textarea v-model="configForm.description" placeholder="请输入参数描述"
              class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none"
              rows="3"></textarea>
          </div>
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">系统内置</label>
          <div class="flex space-x-4 mt-2">
            <label class="flex items-center">
              <input type="radio" name="isSystem" :value="true" v-model="configForm.isSystem" class="mr-2" />
              <span class="text-sm text-gray-700">是</span>
            </label>
            <label class="flex items-center">
              <input type="radio" name="isSystem" :value="false" v-model="configForm.isSystem" class="mr-2" />
              <span class="text-sm text-gray-700">否</span>
            </label>
          </div>
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
          <div class="flex space-x-4 mt-2">
            <label class="flex items-center">
              <input type="radio" name="status" value="启用" v-model="configForm.status" class="mr-2" />
              <span class="text-sm text-gray-700">启用</span>
            </label>
            <label class="flex items-center">
              <input type="radio" name="status" value="禁用" v-model="configForm.status" class="mr-2" />
              <span class="text-sm text-gray-700">禁用</span>
            </label>
          </div>
        </div>
        <div class="flex justify-end space-x-3">
          <button @click="showAddConfigModal = false"
            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg !rounded-button whitespace-nowrap cursor-pointer">
            取消
          </button>
          <button class="px-4 py-2 bg-blue-600 text-white rounded-lg !rounded-button whitespace-nowrap cursor-pointer"
            @click="saveConfig">
            确认
          </button>
        </div>
      </div>
    </div>
    <!-- 新建字典弹窗 -->
    <div v-if="showAddDictModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6 w-[500px]">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-bold text-gray-800">
            {{ editingDict ? "编辑字典" : "新建字典" }}
          </h3>
          <button @click="showAddDictModal = false" class="text-gray-500 hover:text-gray-700 cursor-pointer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">字典名称</label>
          <input type="text" v-model="dictForm.name" placeholder="请输入字典名称"
            class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">字典类型</label>
          <input type="text" v-model="dictForm.type" placeholder="请输入字典类型"
            class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
          <div class="text-xs text-gray-500 mt-1">字典类型是字典的唯一标识</div>
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
          <div class="flex space-x-4 mt-2">
            <label class="flex items-center">
              <input type="radio" name="dictStatus" value="正常" v-model="dictForm.status" class="mr-2" />
              <span class="text-sm text-gray-700">正常</span>
            </label>
            <label class="flex items-center">
              <input type="radio" name="dictStatus" value="停用" v-model="dictForm.status" class="mr-2" />
              <span class="text-sm text-gray-700">停用</span>
            </label>
          </div>
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
          <textarea v-model="dictForm.remark" placeholder="请输入备注"
            class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none"
            rows="3"></textarea>
        </div>
        <div class="flex justify-end space-x-3">
          <button @click="showAddDictModal = false"
            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg !rounded-button whitespace-nowrap cursor-pointer">
            取消
          </button>
          <button class="px-4 py-2 bg-blue-600 text-white rounded-lg !rounded-button whitespace-nowrap cursor-pointer"
            @click="saveDict">
            确认
          </button>
        </div>
      </div>
    </div>
    <!-- 字典数据弹窗 -->
    <div v-if="showDictDataModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6 w-[800px] max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-bold text-gray-800">
            字典数据 - {{ currentDict.name }}
          </h3>
          <button @click="showDictDataModal = false" class="text-gray-500 hover:text-gray-700 cursor-pointer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="bg-blue-50 p-4 rounded-lg mb-4">
          <div class="flex items-center">
            <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3" :class="currentDict.iconBg">
              <i :class="currentDict.icon + ' ' + currentDict.iconColor"></i>
            </div>
            <div>
              <div class="text-sm font-medium text-gray-900">
                {{ currentDict.name }}
              </div>
              <div class="text-xs text-gray-500">{{ currentDict.type }}</div>
            </div>
            <div class="ml-auto">
              <button
                class="px-3 py-1 bg-blue-600 text-white rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                @click="showAddDictDataModal = true">
                <i class="fas fa-plus mr-1"></i> 新增字典数据
              </button>
            </div>
          </div>
        </div>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead>
              <tr>
                <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                  字典标签
                </th>
                <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                  字典键值
                </th>
                <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                  状态
                </th>
                <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                  排序
                </th>
                <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                  备注
                </th>
                <th class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                  操作
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr v-for="(data, index) in dictDataList" :key="index" class="hover:bg-gray-50">
                <td class="px-4 py-3">
                  <div class="flex items-center justify-center">
                    <div class="text-sm font-medium text-gray-900">
                      {{ data.label }}
                    </div>
                  </div>
                </td>
                <td class="px-4 py-3">
                  <div class="text-sm text-gray-900 justify-center">{{ data.value }}</div>
                </td>
                <td class="px-4 py-3">
                  <div class="flex items-center justify-center">
                    <div class="w-2 h-2 rounded-full mr-2" :class="data.status === '正常' ? 'bg-green-500' : 'bg-red-500'
                      "></div>
                    <span class="text-sm" :class="data.status === '正常'
                      ? 'text-green-600'
                      : 'text-red-600'
                      ">{{ data.status }}</span>
                  </div>
                </td>
                <td class="px-4 py-3">
                  <div class="text-sm text-gray-900 justify-center">{{ data.sort }}</div>
                </td>
                <td class="px-4 py-3">
                  <div class="text-sm text-gray-900 justify-center">{{ data.remark }}</div>
                </td>
                <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                  <div class="flex space-x-2 justify-center">
                    <button class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer"
                      @click="editDictData(data)">
                      <i class="fas fa-edit mr-1"></i> 编辑
                    </button>
                    <button class="text-red-600 hover:text-red-800 !rounded-button whitespace-nowrap cursor-pointer"
                      @click="deleteDictData(data)">
                      <i class="fas fa-trash-alt mr-1"></i> 删除
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- 新增字典数据弹窗 -->
    <div v-if="showAddDictDataModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6 w-[500px]">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-bold text-gray-800">
            {{ editingDictData ? "编辑字典数据" : "新增字典数据" }}
          </h3>
          <button @click="showAddDictDataModal = false" class="text-gray-500 hover:text-gray-700 cursor-pointer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">字典类型</label>
          <input type="text" :value="currentDict.type" disabled
            class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">字典标签</label>
          <input type="text" v-model="dictDataForm.label" placeholder="请输入字典标签"
            class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">字典键值</label>
          <input type="text" v-model="dictDataForm.value" placeholder="请输入字典键值"
            class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">排序</label>
          <input type="number" v-model="dictDataForm.sort" placeholder="请输入排序"
            class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
          <div class="flex space-x-4 mt-2">
            <label class="flex items-center">
              <input type="radio" name="dictDataStatus" value="正常" v-model="dictDataForm.status" class="mr-2" />
              <span class="text-sm text-gray-700">正常</span>
            </label>
            <label class="flex items-center">
              <input type="radio" name="dictDataStatus" value="停用" v-model="dictDataForm.status" class="mr-2" />
              <span class="text-sm text-gray-700">停用</span>
            </label>
          </div>
        </div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
          <textarea v-model="dictDataForm.remark" placeholder="请输入备注"
            class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none"
            rows="3"></textarea>
        </div>
        <div class="flex justify-end space-x-3">
          <button @click="showAddDictDataModal = false"
            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg !rounded-button whitespace-nowrap cursor-pointer">
            取消
          </button>
          <button class="px-4 py-2 bg-blue-600 text-white rounded-lg !rounded-button whitespace-nowrap cursor-pointer"
            @click="saveDictData">
            确认
          </button>
        </div>
      </div>
    </div>
    <!-- 系统还原弹窗 -->
    <div v-if="showRestoreModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6 w-[500px]">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-bold text-gray-800">系统还原</h3>
          <button @click="showRestoreModal = false" class="text-gray-500 hover:text-gray-700 cursor-pointer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="mb-6">
          <div class="bg-yellow-50 p-4 rounded-lg text-sm text-yellow-800 mb-4">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            警告：系统还原将覆盖当前系统配置，请谨慎操作！建议在操作前先创建备份。
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">还原方式</label>
            <div class="flex space-x-4 mt-2">
              <label class="flex items-center">
                <input type="radio" name="restoreType" value="backup" v-model="restoreForm.type" class="mr-2" />
                <span class="text-sm text-gray-700">从备份还原</span>
              </label>
              <label class="flex items-center">
                <input type="radio" name="restoreType" value="file" v-model="restoreForm.type" class="mr-2" />
                <span class="text-sm text-gray-700">从文件还原</span>
              </label>
            </div>
          </div>
          <div v-if="restoreForm.type === 'backup'" class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">选择备份</label>
            <div class="relative">
              <button
                class="flex items-center justify-between w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer">
                <span class="text-gray-700">{{
                  restoreForm.backup || "请选择备份文件"
                }}</span>
                <i class="fas fa-chevron-down text-gray-500 text-xs"></i>
              </button>
            </div>
          </div>
          <div v-if="restoreForm.type === 'file'" class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">上传备份文件</label>
            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
              <div class="space-y-1 text-center">
                <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
                <div class="flex text-sm text-gray-600">
                  <label for="file-upload"
                    class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
                    <span>上传文件</span>
                    <input id="file-upload" name="file-upload" type="file" class="sr-only" />
                  </label>
                  <p class="pl-1">或拖拽文件到此处</p>
                </div>
                <p class="text-xs text-gray-500">支持 .zip, .sql, .bak 格式</p>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-end space-x-3">
          <button @click="showRestoreModal = false"
            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg !rounded-button whitespace-nowrap cursor-pointer">
            取消
          </button>
          <button class="px-4 py-2 bg-yellow-600 text-white rounded-lg !rounded-button whitespace-nowrap cursor-pointer"
            @click="confirmRestore">
            确认还原
          </button>
        </div>
      </div>
    </div>
    <!-- 确认删除字典弹窗 -->
    <div v-if="showDeleteDictModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6 w-[400px]">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-bold text-gray-800">删除字典</h3>
          <button @click="showDeleteDictModal = false" class="text-gray-500 hover:text-gray-700 cursor-pointer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="mb-6">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3" :class="currentDict.iconBg">
              <i :class="currentDict.icon + ' ' + currentDict.iconColor"></i>
            </div>
            <div>
              <div class="text-sm font-medium text-gray-900">
                {{ currentDict.name }}
              </div>
              <div class="text-xs text-gray-500">{{ currentDict.type }}</div>
            </div>
          </div>
          <div class="bg-red-50 p-3 rounded-lg text-sm text-red-800">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            确定要删除该字典吗？删除后将无法恢复，且该字典下的所有字典数据也将被删除。
          </div>
        </div>
        <div class="flex justify-end space-x-3">
          <button @click="showDeleteDictModal = false"
            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg !rounded-button whitespace-nowrap cursor-pointer">
            取消
          </button>
          <button class="px-4 py-2 bg-red-600 text-white rounded-lg !rounded-button whitespace-nowrap cursor-pointer"
            @click="confirmDeleteDict">
            确认删除
          </button>
        </div>
      </div>
    </div>
    <!-- 确认删除字典数据弹窗 -->
    <div v-if="showDeleteDictDataModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6 w-[400px]">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-bold text-gray-800">删除字典数据</h3>
          <button @click="showDeleteDictDataModal = false" class="text-gray-500 hover:text-gray-700 cursor-pointer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="mb-6">
          <div class="flex items-center mb-4">
            <div class="text-sm font-medium text-gray-900">
              字典标签: {{ currentDictData.label }}
            </div>
          </div>
          <div class="bg-red-50 p-3 rounded-lg text-sm text-red-800">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            确定要删除该字典数据吗？删除后将无法恢复。
          </div>
        </div>
        <div class="flex justify-end space-x-3">
          <button @click="showDeleteDictDataModal = false"
            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg !rounded-button whitespace-nowrap cursor-pointer">
            取消
          </button>
          <button class="px-4 py-2 bg-red-600 text-white rounded-lg !rounded-button whitespace-nowrap cursor-pointer"
            @click="confirmDeleteDictData">
            确认删除
          </button>
        </div>
      </div>
    </div>
    <!-- 确认删除备份弹窗 -->
    <div v-if="showDeleteBackupModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6 w-[400px]">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-bold text-gray-800">删除备份</h3>
          <button @click="showDeleteBackupModal = false" class="text-gray-500 hover:text-gray-700 cursor-pointer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="mb-6">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3"
              :class="getBackupIconClass(currentBackup.type).bg">
              <i :class="getBackupIconClass(currentBackup.type).icon +
                ' ' +
                getBackupIconClass(currentBackup.type).color
                "></i>
            </div>
            <div>
              <div class="text-sm font-medium text-gray-900">
                {{ currentBackup.name }}
              </div>
              <div class="text-xs text-gray-500">{{ currentBackup.time }}</div>
            </div>
          </div>
          <div class="bg-red-50 p-3 rounded-lg text-sm text-red-800">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            确定要删除该备份吗？删除后将无法恢复。
          </div>
        </div>
        <div class="flex justify-end space-x-3">
          <button @click="showDeleteBackupModal = false"
            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg !rounded-button whitespace-nowrap cursor-pointer">
            取消
          </button>
          <button class="px-4 py-2 bg-red-600 text-white rounded-lg !rounded-button whitespace-nowrap cursor-pointer"
            @click="confirmDeleteBackup">
            确认删除
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Header from "../components/Header.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
export default {
  components: {
    Header,
  },
  data() {
    return {
      activeTab: "params",
      tabs: [
        { id: "params", name: "系统参数配置", icon: "fas fa-cogs" },
        { id: "dict", name: "字典管理", icon: "fas fa-book" },
        { id: "backup", name: "系统备份还原", icon: "fas fa-database" },
      ],
      isAllSelected: false,
      // 添加分页相关数据
      currentPage: 1,
      currentPageDict: 1, // 字典管理的当前页
      currentPageBackup: 1, // 备份管理的当前页
      pageSize: 5,
      pageSizeDict: 5, // 字典管理的每页条数
      pageSizeBackup: 5, // 备份管理的每页条数
      pageSizes: [5, 8],
      showDeleteDictDataModal: false, // 添加删除字典数据确认弹窗标志
      currentDictData: {}, // 添加当前字典数据对象
      backupFilterConditions: {
        search: "",
      },
      showAddConfigModal: false,
      showAddDictModal: false,
      showDictDataModal: false,
      showAddDictDataModal: false,
      showRestoreModal: false,
      showDeleteDictModal: false,
      showDeleteBackupModal: false,
      editingParam: false,
      editingDict: false,
      editingDictData: false,
      currentDict: {},
      currentBackup: {},
      configForm: {
        name: "",
        key: "",
        value: "",
        description: "",
        isSystem: false,
        status: "启用",
      },
      dictForm: {
        name: "",
        type: "",
        status: "正常",
        remark: "",
      },
      dictDataForm: {
        label: "",
        value: "",
        sort: 0,
        status: "正常",
        remark: "",
      },
      restoreForm: {
        type: "backup",
        backup: "",
      },
      // 添加筛选条件
      paramFilterConditions: {
        type: "全部类型",
        status: "全部状态",
        search: "",
      },
      dictFilterConditions: {
        status: "全部状态",
        search: "",
      },
      // 添加下拉菜单显示状态
      showTypeDropdown: false,
      showParamStatusDropdown: false,
      showDictStatusDropdown: false,
      // 参数类型选项
      paramTypes: ["全部类型", "系统内置", "用户自定义"],
      // 状态选项
      paramStatusOptions: ["全部状态", "启用", "禁用"],
      dictStatusOptions: ["全部状态", "正常", "停用"],
      mainMenus: [
        {
          name: "监测报警",
          icon: "fas fa-bell",
          expanded: false,
          active: false,
          subMenus: [
            { name: "数据汇聚功能", active: false, link: "/data-aggregation" },
            {
              name: "监测指标统计",
              active: false,
              link: "/monitoring-indicators",
            },
            { name: "区域化展示", active: false, link: "/regional-display" },
          ],
        },
        {
          name: "风险研判",
          icon: "fas fa-exclamation-triangle",
          expanded: false,
          active: false,
          subMenus: [
             { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: true, link: '/risk-analysis' },
                    ]
        },
        {
          name: "在线巡查",
          icon: "fas fa-search",
          expanded: false,
          active: false,
          subMenus: [
            {
              name: "企业信息汇总",
              active: false,
              link: "/summary-information",
            },
            { name: "巡查功能", active: false, link: "/patrol" },
            { name: "检索功能", active: false, link: "search" },
            { name: "一屏汇聚展示", active: false, link: "/screen-display" },
          ],
        },
        {
          name: "综合分析",
          icon: "fas fa-chart-line",
          expanded: false,
          active: false,
          subMenus: [
            { name: "联网与设备分析", active: false, link: "/equipment" },
            { name: "应用情况分析", active: false, link: "/application" },
            { name: "数据质量分析", active: false, link: "/data-quality" },
            { name: "定期专题报告", active: false, link: "report" },
          ],
        },
        {
          name: "系统管理",
          icon: "fas fa-cog",
          expanded: true,
          active: true,
          subMenus: [
            { name: "用户权限管理", active: false, link: "user-permission" },
            { name: "系统配置管理", active: true, link: "system-manage" },
            { name: "数据管理", active: false, link: "data-manage" },
            { name: "系统监控与维护", active: false, link: "monitoring" },
          ],
        },
      ],
      params: [
        {
          id: 1,
          name: "系统名称",
          key: "sys.name",
          value: "钢铁企业安全生产智能监管平台",
          description: "系统显示名称",
          isSystem: true,
          status: "启用",
          updateTime: "2025-07-01 10:00:00",
          selected: false,
        },
        {
          id: 2,
          name: "系统版本号",
          key: "sys.version",
          value: "v2.5.3",
          description: "当前系统版本",
          isSystem: true,
          status: "启用",
          updateTime: "2025-07-01 10:00:00",
          selected: false,
        },
        {
          id: 3,
          name: "系统通知",
          key: "sys.notice",
          value: "系统将于 2025-07-15 凌晨 2 点进行例行维护",
          description: "系统公告信息",
          isSystem: false,
          status: "启用",
          updateTime: "2025-07-07 14:30:00",
          selected: false,
        },
        {
          id: 4,
          name: "账号初始密码",
          key: "sys.user.initPassword",
          value: "Safety@2025",
          description: "用户初始密码",
          isSystem: true,
          status: "启用",
          updateTime: "2025-06-15 09:20:00",
          selected: false,
        },
        {
          id: 5,
          name: "密码最小长度",
          key: "sys.password.minLength",
          value: "8",
          description: "密码最小长度限制",
          isSystem: true,
          status: "启用",
          updateTime: "2025-06-15 09:20:00",
          selected: false,
        },
        {
          id: 6,
          name: "密码复杂度要求",
          key: "sys.password.complexity",
          value: "true",
          description: "是否启用密码复杂度检查",
          isSystem: true,
          status: "启用",
          updateTime: "2025-06-15 09:20:00",
          selected: false,
        },
        {
          id: 7,
          name: "会话超时时间",
          key: "sys.session.timeout",
          value: "30",
          description: "会话超时时间（分钟）",
          isSystem: true,
          status: "启用",
          updateTime: "2025-06-20 11:15:00",
          selected: false,
        },
        {
          id: 8,
          name: "首页模板",
          key: "sys.index.template",
          value: "default",
          description: "系统首页模板",
          isSystem: false,
          status: "启用",
          updateTime: "2025-07-05 16:45:00",
          selected: false,
        },
        {
          id: 9,
          name: "数据备份周期",
          key: "sys.backup.cycle",
          value: "7",
          description: "自动备份周期（天）",
          isSystem: false,
          status: "启用",
          updateTime: "2025-07-02 08:30:00",
          selected: false,
        },
        {
          id: 10,
          name: "报警阈值",
          key: "sys.alert.threshold",
          value: "80",
          description: "系统资源报警阈值（%）",
          isSystem: false,
          status: "启用",
          updateTime: "2025-07-03 14:20:00",
          selected: false,
        },
      ],
      dictionaries: [
        {
          id: 1,
          name: "用户性别",
          type: "sys_user_sex",
          status: "正常",
          remark: "用户性别列表",
          createTime: "2025-01-15 10:00:00",
          icon: "fas fa-venus-mars",
          iconBg: "bg-pink-100",
          iconColor: "text-pink-600",
        },
        {
          id: 2,
          name: "菜单状态",
          type: "sys_show_hide",
          status: "正常",
          remark: "菜单状态列表",
          createTime: "2025-01-15 10:05:00",
          icon: "fas fa-list",
          iconBg: "bg-blue-100",
          iconColor: "text-blue-600",
        },
        {
          id: 3,
          name: "系统开关",
          type: "sys_normal_disable",
          status: "正常",
          remark: "系统开关列表",
          createTime: "2025-01-15 10:10:00",
          icon: "fas fa-toggle-on",
          iconBg: "bg-green-100",
          iconColor: "text-green-600",
        },
        {
          id: 4,
          name: "任务状态",
          type: "sys_job_status",
          status: "正常",
          remark: "任务状态列表",
          createTime: "2025-01-15 10:15:00",
          icon: "fas fa-tasks",
          iconBg: "bg-purple-100",
          iconColor: "text-purple-600",
        },
        {
          id: 5,
          name: "任务分组",
          type: "sys_job_group",
          status: "正常",
          remark: "任务分组列表",
          createTime: "2025-02-20 14:30:00",
          icon: "fas fa-layer-group",
          iconBg: "bg-yellow-100",
          iconColor: "text-yellow-600",
        },
        {
          id: 6,
          name: "系统是否",
          type: "sys_yes_no",
          status: "正常",
          remark: "系统是否列表",
          createTime: "2025-03-10 09:45:00",
          icon: "fas fa-check-circle",
          iconBg: "bg-teal-100",
          iconColor: "text-teal-600",
        },
        {
          id: 7,
          name: "通知类型",
          type: "sys_notice_type",
          status: "正常",
          remark: "通知类型列表",
          createTime: "2025-04-05 11:20:00",
          icon: "fas fa-bullhorn",
          iconBg: "bg-indigo-100",
          iconColor: "text-indigo-600",
        },
        {
          id: 8,
          name: "通知状态",
          type: "sys_notice_status",
          status: "正常",
          remark: "通知状态列表",
          createTime: "2025-05-12 15:40:00",
          icon: "fas fa-bell",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
        },
      ],
      dictDataList: [
        {
          id: 1,
          label: "男",
          value: "0",
          status: "正常",
          sort: 1,
          remark: "性别男",
        },
        {
          id: 2,
          label: "女",
          value: "1",
          status: "正常",
          sort: 2,
          remark: "性别女",
        },
        {
          id: 3,
          label: "未知",
          value: "2",
          status: "正常",
          sort: 3,
          remark: "性别未知",
        },
      ],
      backups: [
        {
          id: 1,
          name: "系统完整备份_20250708",
          type: "完整备份",
          size: "256MB",
          time: "2025-07-08 02:00:00",
          creator: "系统自动",
          status: "完成",
        },
        {
          id: 2,
          name: "系统配置备份_20250707",
          type: "配置备份",
          size: "45MB",
          time: "2025-07-07 02:00:00",
          creator: "系统自动",
          status: "完成",
        },
        {
          id: 3,
          name: "数据库备份_20250706",
          type: "数据库备份",
          size: "180MB",
          time: "2025-07-06 02:00:00",
          creator: "系统自动",
          status: "完成",
        },
        {
          id: 4,
          name: "手动完整备份_20250705",
          type: "完整备份",
          size: "260MB",
          time: "2025-07-05 15:30:00",
          creator: "管理员",
          status: "完成",
        },
        {
          id: 5,
          name: "升级前备份_20250704",
          type: "完整备份",
          size: "255MB",
          time: "2025-07-04 09:15:00",
          creator: "管理员",
          status: "完成",
        },
        {
          id: 6,
          name: "系统配置备份_20250703",
          type: "配置备份",
          size: "44MB",
          time: "2025-07-03 02:00:00",
          creator: "系统自动",
          status: "完成",
        },
        {
          id: 7,
          name: "数据库备份_20250702",
          type: "数据库备份",
          size: "178MB",
          time: "2025-07-02 02:00:00",
          creator: "系统自动",
          status: "完成",
        },
        {
          id: 8,
          name: "系统完整备份_20250701",
          type: "完整备份",
          size: "252MB",
          time: "2025-07-01 02:00:00",
          creator: "系统自动",
          status: "完成",
        },
      ],
    };
  },
  computed: {
    hasSelectedParams() {
      return this.params.some((param) => param.selected);
    },
    selectedParamsCount() {
      return this.params.filter((param) => param.selected).length;
    },
    // 添加分页计算属性
    paginatedParams() {
      // 应用筛选条件后的参数列表
      let filteredParams = this.applyParamFilters();

      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return filteredParams.slice(start, end);
    },
    paginatedDictionaries() {
      // 应用筛选条件后的字典列表
      let filteredDictionaries = this.applyDictFilters();

      const start = (this.currentPageDict - 1) * this.pageSizeDict;
      const end = start + this.pageSizeDict;
      return filteredDictionaries.slice(start, end);
    },
    paginatedBackups() {
      // 应用筛选条件后的备份列表
      let filteredBackups = this.applyBackupFilters();

      const start = (this.currentPageBackup - 1) * this.pageSizeBackup;
      const end = start + this.pageSizeBackup;
      return filteredBackups.slice(start, end);
    },
    totalPages() {
      // 根据筛选结果计算总页数
      const filteredParams = this.applyParamFilters();
      return Math.ceil(filteredParams.length / this.pageSize);
    },
    totalPagesDict() {
      // 根据筛选结果计算总页数
      const filteredDictionaries = this.applyDictFilters();
      return Math.ceil(filteredDictionaries.length / this.pageSizeDict);
    },
    totalPagesBackup() {
      // 根据筛选结果计算总页数
      const filteredBackups = this.applyBackupFilters();
      return Math.ceil(this.backups.length / this.pageSizeBackup);
    },
    // 获取选中的参数
    selectedParams() {
      return this.params.filter((param) => param.selected);
    },
  },
  mounted() {
    // 初始化参数数据
    this.initializeParamsFromLocalStorage();
    // 初始化字典数据
    this.initializeDictionariesFromLocalStorage();
    // 添加点击外部关闭下拉
    // 菜单的事件监听
    document.addEventListener("click", this.closeDropdowns);
    // 添加点击外部关闭字典数据弹窗的事件监听
    document.addEventListener("click", this.handleClickOutsideDictDataModal);
  },
  // 添加watch监听activeTab变化
  watch: {
    activeTab(newTab) {
      if (newTab === "backup") {
        // 使用$nextTick确保DOM已更新
        this.$nextTick(() => {
          this.initBackupCharts();
        });
      }
    },
  },
  beforeUnmount() {
    // 移除事件监听
    document.removeEventListener("click", this.closeDropdowns);
    document.removeEventListener("click", this.handleClickOutsideDictDataModal);
  },
  methods: {
    // 切换配置类型下拉菜单
    toggleTypeDropdown() {
      this.showTypeDropdown = !this.showTypeDropdown;
      // 关闭其他下拉菜单
      if (this.showTypeDropdown) {
        this.showParamStatusDropdown = false;
      }
    },
    // 切换参数状态下拉菜单
    toggleParamStatusDropdown() {
      this.showParamStatusDropdown = !this.showParamStatusDropdown;
      // 关闭其他下拉菜单
      if (this.showParamStatusDropdown) {
        this.showTypeDropdown = false;
      }
    },
    // 切换字典状态下拉菜单
    toggleDictStatusDropdown() {
      this.showDictStatusDropdown = !this.showDictStatusDropdown;
    },
    // 选择配置类型
    selectParamType(type) {
      this.paramFilterConditions.type = type;
      this.showTypeDropdown = false;
      this.currentPage = 1; // 重置到第一页
    },
    // 选择参数状态
    selectParamStatus(status) {
      this.paramFilterConditions.status = status;
      this.showParamStatusDropdown = false;
      this.currentPage = 1; // 重置到第一页
    },
    // 选择字典状态
    selectDictStatus(status) {
      this.dictFilterConditions.status = status;
      this.showDictStatusDropdown = false;
      this.currentPageDict = 1; // 重置到第一页
    },
    // 处理参数搜索
    handleParamSearch() {
      this.currentPage = 1; // 重置到第一页
    },
    // 处理字典搜索
    handleDictSearch() {
      this.currentPageDict = 1; // 重置到第一页
    },
    // 处理备份搜索
    handleBackupSearch() {
      this.currentPageBackup = 1; // 重置到第一页
    },
    // 应用参数筛选条件
    applyParamFilters() {
      let filteredParams = [...this.params];

      // 配置类型筛选
      if (this.paramFilterConditions.type !== "全部类型") {
        if (this.paramFilterConditions.type === "系统内置") {
          filteredParams = filteredParams.filter((param) => param.isSystem);
        } else if (this.paramFilterConditions.type === "用户自定义") {
          filteredParams = filteredParams.filter((param) => !param.isSystem);
        }
      }
      // 状态筛选
      if (this.paramFilterConditions.status !== "全部状态") {
        filteredParams = filteredParams.filter(
          (param) => param.status === this.paramFilterConditions.status
        );
      }
      // 搜索筛选
      if (this.paramFilterConditions.search) {
        const searchTerm = this.paramFilterConditions.search.toLowerCase();
        filteredParams = filteredParams.filter(
          (param) =>
            param.name.toLowerCase().includes(searchTerm) ||
            param.key.toLowerCase().includes(searchTerm) ||
            param.description.toLowerCase().includes(searchTerm)
        );
      }
      return filteredParams;
    },
    // 应用字典筛选条件
    applyDictFilters() {
      let filteredDictionaries = [...this.dictionaries];
      // 状态筛选
      if (this.dictFilterConditions.status !== "全部状态") {
        filteredDictionaries = filteredDictionaries.filter(
          (dict) => dict.status === this.dictFilterConditions.status
        );
      }
      // 搜索筛选
      if (this.dictFilterConditions.search) {
        const searchTerm = this.dictFilterConditions.search.toLowerCase();
        filteredDictionaries = filteredDictionaries.filter(
          (dict) =>
            dict.name.toLowerCase().includes(searchTerm) ||
            dict.type.toLowerCase().includes(searchTerm) ||
            dict.remark.toLowerCase().includes(searchTerm)
        );
      }
      return filteredDictionaries;
    },
    // 应用备份筛选条件
    applyBackupFilters() {
      let filteredBackups = [...this.backups];
      // 搜索筛选
      if (this.backupFilterConditions.search) {
        const searchTerm = this.backupFilterConditions.search.toLowerCase();
        filteredBackups = filteredBackups.filter(
          (backup) =>
            backup.name.toLowerCase().includes(searchTerm) ||
            backup.type.toLowerCase().includes(searchTerm) ||
            backup.creator.toLowerCase().includes(searchTerm)
        );
      }
      return filteredBackups;
    },
    closeDropdowns() {
      // 点击外部关闭下拉菜单
      this.showTypeDropdown = false;
      this.showParamStatusDropdown = false;
      this.showDictStatusDropdown = false;
    },
    // 点击外部关闭字典数据弹窗
    handleClickOutsideDictDataModal(event) {
      // 检查点击的元素是否在字典数据弹窗外
      const modal = this.$el.querySelector('.fixed.inset-0.bg-black.bg-opacity-50.flex.items-center.justify-center.z-50');
      if (!modal) return;
      
      // 检查点击的元素是否是弹窗本身或弹窗内部元素
      const isClickInsideModal = modal.contains(event.target);
      const isModalBackdrop = event.target === modal;
      
      // 如果点击的是弹窗背景且当前显示的是字典数据弹窗，则关闭弹窗
      if (this.showDictDataModal && isModalBackdrop) {
        this.showDictDataModal = false;
      }
    },
    // 添加分页方法
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
      }
    },
    changePageSize(size) {
      this.pageSize = size;
      this.currentPage = 1; // 重置到第一页
    },
    // 字典管理分页方法
    changePageDict(page) {
      if (page >= 1 && page <= this.totalPagesDict) {
        this.currentPageDict = page;
      }
    },
    changePageSizeDict(size) {
      this.pageSizeDict = size;
      this.currentPageDict = 1; // 重置到第一页
    },
    // 备份管理分页方法
    changePageBackup(page) {
      if (page >= 1 && page <= this.totalPagesBackup) {
        this.currentPageBackup = page;
      }
    },
    changePageSizeBackup(size) {
      this.pageSizeBackup = size;
      this.currentPageBackup = 1; // 重置到第一页
    },
    // 批量删除参数
    async batchDeleteParams() {
      if (!this.hasSelectedParams) {
        return;
      }
      const selectedCount = this.selectedParamsCount;
      try {
        await ElMessageBox.confirm(
          `确定要删除选中的 ${selectedCount} 个参数吗？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        );

        // 获取选中参数的ID列表
        const selectedIds = this.selectedParams.map((param) => param.id);

        // 从参数列表中删除选中的参数
        this.params = this.params.filter(
          (param) => !selectedIds.includes(param.id)
        );

        // 更新总记录数
        this.totalParams = this.params.length;

        // 保存到本地存储
        this.saveParamsToLocalStorage();

        ElMessage.success(`成功删除 ${selectedCount} 个参数`);
      } catch (error) {
        // 用户点击取消
        
      }
    },
    // 批量导出参数
    batchExportParams() {
      if (!this.hasSelectedParams) {
        return;
      }
      // 获取选中的参数
      const selectedParams = this.selectedParams;

      // 准备导出数据
      const exportData = selectedParams.map((param) => ({
        参数名称: param.name,
        参数键名: param.key,
        参数键值: param.value,
        参数描述: param.description,
        系统内置: param.isSystem ? "是" : "否",
        状态: param.status,
        更新时间: param.updateTime,
      }));

      // 创建CSV内容
      const headers = Object.keys(exportData[0]).join(",");
      const rows = exportData.map((row) =>
        Object.values(row)
          .map(
            (field) => `"${String(field).replace(/"/g, '""')}"` // 转义双引号
          )
          .join(",")
      );
      const csvContent = [headers, ...rows].join("\n");

      // 创建下载链接
      const blob = new Blob(["\ufeff" + csvContent], {
        type: "text/csv;charset=utf-8;",
      });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute(
        "download",
        `系统参数_${new Date().toISOString().slice(0, 10)}.csv`
      );
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      ElMessage.success(`成功导出 ${selectedParams.length} 个参数`);
    },
    toggleMenu(index) {
      this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
      // 如果展开了菜单，则将其他菜单收起
      if (this.mainMenus[index].expanded) {
        this.mainMenus.forEach((menu, i) => {
          if (i !== index) {
            menu.expanded = false;
          }
        });
      }
    },
    selectSubmenu(menuIndex, submenuIndex) {
      // 重置所有菜单的激活状态
      this.mainMenus.forEach((menu) => {
        menu.active = false;
        menu.subMenus.forEach((submenu) => {
          submenu.active = false;
        });
      });
      // 设置当前选中的菜单和子菜单为激活状态
      this.mainMenus[menuIndex].active = true;
      this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
    },
    toggleSelectAll() {
      this.isAllSelected = !this.isAllSelected;
      //只选择当前页的数据
      this.paginatedParams.forEach((param) => {
        param.selected = this.isAllSelected;
      });
    },
    editParam(param) {
      this.editingParam = true;
      this.configForm = { ...param };
      this.showAddConfigModal = true;
    },
    addParam() {
      this.editingParam = false;
      this.resetConfigForm();
      this.showAddConfigModal = true;
    },
    toggleParamStatus(param) {
      param.status = param.status === "启用" ? "禁用" : "启用";
    },
    saveConfig() {
      // 验证必填字段
      if (
        !this.configForm.name ||
        !this.configForm.key ||
        !this.configForm.value
      ) {
        ElMessage.warning('请填写参数名称、参数键名和参数键值');
        return;
      }

      // 检查参数键名是否已存在（编辑时排除自己）
      const existingParam = this.params.find(
        (param) =>
          param.key === this.configForm.key &&
          (!this.editingParam || param.id !== this.configForm.id)
      );

      if (existingParam) {
        ElMessage.warning('参数键名已存在，请修改后重试');
        return;
      }

      if (this.editingParam) {
        // 编辑现有参数
        const index = this.params.findIndex(
          (param) => param.id === this.configForm.id
        );
        if (index !== -1) {
          this.params.splice(index, 1, {
            ...this.configForm,
            updateTime: new Date()
              .toLocaleString("zh-CN", {
                year: "numeric",
                month: "2-digit",
                day: "2-digit",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit",
                hour12: false,
              })
              .replace(/\//g, "-")
              .replace(",", ""),
          });
        }
      } else {
        // 新增参数
        const newParam = {
          ...this.configForm,
          id: this.generateParamId(), // 生成新ID
          updateTime: new Date()
            .toLocaleString("zh-CN", {
              year: "numeric",
              month: "2-digit",
              day: "2-digit",
              hour: "2-digit",
              minute: "2-digit",
              second: "2-digit",
              hour12: false,
            })
            .replace(/\//g, "-")
            .replace(",", ""),
        };
        this.params.unshift(newParam); // 添加到列表开头
        this.totalParams++; // 更新总记录数
      }

      // 保存到本地存储
      this.saveParamsToLocalStorage();

      // 关闭弹窗并重置表单
      this.showAddConfigModal = false;
      this.editingParam = false;
      this.resetConfigForm();

      // 重新计算分页
      this.currentPage = 1;
      ElMessage.success(this.editingParam ? '参数编辑成功' : '参数添加成功');
    },
    // 生成参数ID的方法
    generateParamId() {
      return this.params.length > 0
        ? Math.max(...this.params.map((p) => p.id)) + 1
        : 1;
    },
    // 重置配置表单
    resetConfigForm() {
      this.configForm = {
        name: "",
        key: "",
        value: "",
        description: "",
        isSystem: false,
        status: "启用",
      };
    },
    // 保存参数到本地存储
    saveParamsToLocalStorage() {
      localStorage.setItem("systemConfigParams", JSON.stringify(this.params));
    },
    // 从本地存储初始化参数
    initializeParamsFromLocalStorage() {
      const storedParams = localStorage.getItem("systemConfigParams");
      if (storedParams) {
        this.params = JSON.parse(storedParams);
        this.totalParams = this.params.length;
      }
    },
    // 生成随机图标
    getRandomIcon() {
      const icons = [
        "fas fa-book",
        "fas fa-atlas",
        "fas fa-dictionary",
        "fas fa-list",
        "fas fa-th-list",
        "fas fa-table",
        "fas fa-file-alt",
        "fas fa-folder",
      ];
      return icons[Math.floor(Math.random() * icons.length)];
    },
    // 生成随机背景色类
    getRandomIconBg() {
      const bgColors = [
        "bg-blue-100",
        "bg-green-100",
        "bg-yellow-100",
        "bg-red-100",
        "bg-purple-100",
        "bg-pink-100",
        "bg-indigo-100",
        "bg-teal-100",
      ];
      return bgColors[Math.floor(Math.random() * bgColors.length)];
    },
    // 生成随机图标颜色类
    getRandomIconColor() {
      const iconColors = [
        "text-blue-600",
        "text-green-600",
        "text-yellow-600",
        "text-red-600",
        "text-purple-600",
        "text-pink-600",
        "text-indigo-600",
        "text-teal-600",
      ];
      return iconColors[Math.floor(Math.random() * iconColors.length)];
    },
    editDict(dict) {
      this.editingDict = true;
      this.dictForm = {
        id: dict.id,
        name: dict.name,
        type: dict.type,
        status: dict.status,
        remark: dict.remark,
      };
      this.showAddDictModal = true;
    },
    // 查看字典数据
    viewDictData(dict) {
      this.currentDict = dict;
      // 从本地存储加载字典数据
      this.initializeDictDataFromLocalStorage();
      this.showDictDataModal = true;
    },
    // 删除字典
    deleteDict(dict) {
      this.currentDict = dict;
      this.showDeleteDictModal = true;
    },
    // 删除字典数据
    deleteDictData(data) {
      this.currentDictData = data;
      this.showDeleteDictDataModal = true;
    },
    // 删除字典数据确认
    async confirmDeleteDictData() {
      // 删除字典数据
      this.dictDataList = this.dictDataList.filter(
        (item) => item.id !== this.currentDictData.id
      );

      // 保存到本地存储
      this.saveDictDataToLocalStorage();

      // 关闭确认弹框
      this.showDeleteDictDataModal = false;

      ElMessage.success('字典数据删除成功');
    },
    // 删除字典确认
    async confirmDeleteDict() {
      // 删除字典逻辑
      this.dictionaries = this.dictionaries.filter(
        (dict) => dict.id !== this.currentDict.id
      );

      // 保存到本地存储
      this.saveDictionariesToLocalStorage();

      ElMessage.success('字典删除成功');
      this.showDeleteDictModal = false;
    },
    saveDict() {
      // 验证必填字段
      if (!this.dictForm.name || !this.dictForm.type) {
        ElMessage.warning('请填写字典名称和字典类型');
        return;
      }

      // 检查字典类型是否已存在（编辑时排除自己）
      const existingDict = this.dictionaries.find(
        (dict) =>
          dict.type === this.dictForm.type &&
          (!this.editingDict || dict.id !== this.dictForm.id)
      );

      if (existingDict) {
        ElMessage.warning('字典类型已存在，请修改后重试');
        return;
      }

      if (this.editingDict) {
        // 编辑现有字典
        const index = this.dictionaries.findIndex(
          (dict) => dict.id === this.dictForm.id
        );
        if (index !== -1) {
          // 保存原始的图标属性
          const originalIcon = this.dictionaries[index].icon;
          const originalIconBg = this.dictionaries[index].iconBg;
          const originalIconColor = this.dictionaries[index].iconColor;

          this.dictionaries.splice(index, 1, {
            ...this.dictForm,
            id: this.dictForm.id,
            createTime: this.dictionaries[index].createTime, // 保留创建时间
            icon: originalIcon, // 保留原有图标
            iconBg: originalIconBg, // 保留原有背景色
            iconColor: originalIconColor, // 保留原有图标颜色
          });
        }
      } else {
        // 新增字典
        const newDict = {
          ...this.dictForm,
          id: this.generateDictId(), // 生成新ID
          createTime: new Date()
            .toLocaleString("zh-CN", {
              year: "numeric",
              month: "2-digit",
              day: "2-digit",
              hour: "2-digit",
              minute: "2-digit",
              second: "2-digit",
              hour12: false,
            })
            .replace(/\//g, "-")
            .replace(",", ""),
          icon: this.getRandomIcon(), // 生成随机图标
          iconBg: this.getRandomIconBg(), // 生成随机背景色
          iconColor: this.getRandomIconColor(), // 生成随机图标颜色
        };
        this.dictionaries.unshift(newDict); // 添加到列表开头
        this.totalDicts++; // 更新总记录数
      }
      // 保存到本地存储
      this.saveDictionariesToLocalStorage();
      // 关闭弹窗并重置表单
      this.showAddDictModal = false;
      this.editingDict = false;
      this.dictForm = {
        name: "",
        type: "",
        status: "正常",
        remark: "",
      };
      ElMessage.success(this.editingDict ? '字典编辑成功' : '字典添加成功');
    },
    // 生成字典ID的方法
    generateDictId() {
      return this.dictionaries.length > 0
        ? Math.max(...this.dictionaries.map((d) => d.id)) + 1
        : 1;
    },
    // 保存字典到本地存储
    saveDictionariesToLocalStorage() {
      localStorage.setItem(
        "systemConfigDictionaries",
        JSON.stringify(this.dictionaries)
      );
    },
    // 从本地存储初始化字典
    initializeDictionariesFromLocalStorage() {
      const storedDictionaries = localStorage.getItem(
        "systemConfigDictionaries"
      );
      if (storedDictionaries) {
        this.dictionaries = JSON.parse(storedDictionaries);
        this.totalDicts = this.dictionaries.length;
      }
    },
    editDictData(data) {
      this.editingDictData = true;
      this.dictDataForm = { ...data };
      this.showAddDictDataModal = true;
    },
    // 新增字典数据
    addDictData() {
      this.editingDictData = false;
      this.dictDataForm = {
        label: "",
        value: "",
        sort: 0,
        status: "正常",
        remark: "",
      };
      this.showAddDictDataModal = true;
    },
    // 保存字典数据
    saveDictData() {
      // 验证必填字段
      if (!this.dictDataForm.label || !this.dictDataForm.value) {
        ElMessage.warning('请填写字典标签和字典键值');
        return;
      }

      // 检查字典键值是否已存在（编辑时排除自己）
      const existingData = this.dictDataList.find(
        (data) =>
          data.value === this.dictDataForm.value &&
          (!this.editingDictData || data.id !== this.dictDataForm.id)
      );

      if (existingData) {
        ElMessage.warning("字典键值已存在，请修改后重试");
        return;
      }

      if (this.editingDictData) {
        // 编辑现有字典数据
        const index = this.dictDataList.findIndex(
          (item) => item.id === this.dictDataForm.id
        );
        if (index !== -1) {
          this.dictDataList.splice(index, 1, { ...this.dictDataForm });
        }
      } else {
        // 新增字典数据
        const newDictData = {
          ...this.dictDataForm,
          id: this.generateDictDataId(), // 生成新ID
        };
        this.dictDataList.unshift(newDictData);
      }
      // 保存到本地存储
      this.saveDictDataToLocalStorage();

      // 关闭弹窗并重置表单
      this.showAddDictDataModal = false;
      this.editingDictData = false;
      this.dictDataForm = {
        label: "",
        value: "",
        sort: 0,
        status: "正常",
        remark: "",
      };
      ElMessage.success(this.editingDictData ? '字典数据编辑成功' : '字典数据添加成功');
    },
    // 生成字典数据ID的方法
    generateDictDataId() {
      return this.dictDataList.length > 0
        ? Math.max(...this.dictDataList.map((d) => d.id)) + 1
        : 1;
    },
    // 保存字典数据到本地存储
    saveDictDataToLocalStorage() {
      // 创建包含所有字典及其数据的映射
      const dictDataMap =
        JSON.parse(localStorage.getItem("systemConfigDictDataMap")) || {};

      // 使用当前字典类型作为键保存字典数据列表
      if (this.currentDict && this.currentDict.type) {
        dictDataMap[this.currentDict.type] = this.dictDataList;
        localStorage.setItem(
          "systemConfigDictDataMap",
          JSON.stringify(dictDataMap)
        );
      }
    },
    // 从本地存储初始化字典数据
    initializeDictDataFromLocalStorage() {
      const dictDataMap =
        JSON.parse(localStorage.getItem("systemConfigDictDataMap")) || {};
      // 根据当前字典类型加载对应的字典数据
      if (
        this.currentDict &&
        this.currentDict.type &&
        dictDataMap[this.currentDict.type]
      ) {
        this.dictDataList = dictDataMap[this.currentDict.type];
      }
    },
    // 创建备份
    createBackup() {
      ElMessage.success('备份创建成功！');
    },

    // 下载备份
    downloadBackup(backup) {
      ElMessage.info(`正在下载备份：${backup.name}`);
    },
    restoreFromBackup(backup) {
      this.currentBackup = backup;
      this.restoreForm.type = "backup";
      this.restoreForm.backup = backup.name;
      this.showRestoreModal = true;
    },
    deleteBackup(backup) {
      this.currentBackup = backup;
      this.showDeleteBackupModal = true;
    },
    // 删除备份确认
    async confirmDeleteBackup() {
      // 在实际应用中，这里应该发送请求删除备份
      this.showDeleteBackupModal = false;
      this.backups = this.backups.filter(
        (backup) => backup.id !== this.currentBackup.id
      );

      ElMessage.success('备份删除成功');
    },
    confirmRestore() {
      // 在实际应用中，这里应该发送请求执行系统还原
      this.showRestoreModal = false;
      ElMessage.info('系统还原操作已提交，请等待操作完成。');
    },
    getBackupIconClass(type) {
      const classes = {
        完整备份: {
          bg: "bg-blue-100",
          icon: "fas fa-archive",
          color: "text-blue-600",
        },
        配置备份: {
          bg: "bg-green-100",
          icon: "fas fa-cog",
          color: "text-green-600",
        },
        数据库备份: {
          bg: "bg-purple-100",
          icon: "fas fa-database",
          color: "text-purple-600",
        },
      };
      return (
        classes[type] || {
          bg: "bg-gray-100",
          icon: "fas fa-file",
          color: "text-gray-600",
        }
      );
    },
    initBackupCharts() {
      // 备份类型分布图表
      if (this.$refs.backupTypeChart) {
        const backupTypeChart = echarts.init(this.$refs.backupTypeChart);
        const backupTypeOption = {
          animation: false,
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
          },
          legend: {
            orient: "vertical",
            left: 10,
            data: ["完整备份", "配置备份", "数据库备份"],
          },
          series: [
            {
              name: "备份类型",
              type: "pie",
              radius: ["50%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "18",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 12, name: "完整备份" },
                { value: 8, name: "配置备份" },
                { value: 16, name: "数据库备份" },
              ],
            },
          ],
        };
        backupTypeChart.setOption(backupTypeOption);
      }
      // 备份大小趋势图表
      if (this.$refs.backupSizeChart) {
        const backupSizeChart = echarts.init(this.$refs.backupSizeChart);
        const backupSizeOption = {
          animation: false,
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            data: ["7/1", "7/2", "7/3", "7/4", "7/5", "7/6", "7/7", "7/8"],
          },
          yAxis: {
            type: "value",
            name: "大小(MB)",
          },
          series: [
            {
              data: [252, 178, 44, 255, 260, 180, 45, 256],
              type: "line",
              smooth: true,
            },
          ],
        };
        backupSizeChart.setOption(backupSizeOption);
      }
      // 备份频率统计图表
      if (this.$refs.backupFrequencyChart) {
        const backupFrequencyChart = echarts.init(
          this.$refs.backupFrequencyChart
        );
        const backupFrequencyOption = {
          animation: false,
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          xAxis: {
            type: "category",
            data: ["完整备份", "配置备份", "数据库备份"],
          },
          yAxis: {
            type: "value",
            name: "次数",
          },
          series: [
            {
              data: [12, 8, 16],
              type: "bar",
            },
          ],
        };
        backupFrequencyChart.setOption(backupFrequencyOption);
      }
    },
  },
};
</script>
<style scoped>
/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* 自定义颜色类 */
.bg-teal-100 {
  background-color: #b2f5ea;
}

.text-teal-600 {
  color: #319795;
}

.text-teal-800 {
  color: #285e61;
}

.bg-indigo-100 {
  background-color: #e5edff;
}

.text-indigo-600 {
  color: #5a67d8;
}

.text-indigo-800 {
  color: #434190;
}
</style>
